<template>
  <el-card>
    <h1>比赛管理</h1>
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="查看报名" name="chakanbisai">
        <el-form ref="searchFormRef" :model="searchForm" inline>
          <el-form-item>
            <el-select v-model="searchForm.sport" placeholder="比赛项目">
              <el-option
                v-for="it in xiangmuShuzu"
                :key="it._id"
                :label="it.name"
                :value="it._id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="searchByXM()">
              查询
            </el-button>
          </el-form-item>
        </el-form>
        <el-table :data="sportItemList">
          <el-table-column align="center" prop="sport.name" label="比赛项目" />
          <el-table-column
            align="center"
            prop="student.stuName"
            label="参赛学生"
          />
          <el-table-column align="center" prop="student.sex" label="性别" />
          <el-table-column
            align="center"
            prop="student.parent.className"
            label="班级"
          />
          <el-table-column align="center" prop="sport.time" label="比赛时间" />
          <el-table-column align="center" label="操作" width="250px">
            <template slot-scope="scope">
              <el-button
                @click="submitScore(scope.row)"
                type="primary"
                size="medium"
              >
                保存
              </el-button>
              <el-button @click="remove(scope.row)" type="danger" size="medium">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="成绩录入" name="chengjiluru">
        <el-form ref="searchFormRef" :model="searchForm" inline>
          <el-form-item>
            <el-select v-model="searchForm.sport" placeholder="比赛项目">
              <el-option
                v-for="it in xiangmuShuzu"
                :key="it._id"
                :label="it.name"
                :value="it._id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="searchByXM()">
              查询
            </el-button>
          </el-form-item>
        </el-form>
        <el-table :data="sportItemList">
          <el-table-column align="center" prop="sport.name" label="比赛项目" />
          <el-table-column
            align="center"
            prop="student.stuName"
            label="参赛学生"
          />
          <el-table-column align="center" prop="student.sex" label="性别" />
          <el-table-column
            align="center"
            prop="student.parent.className"
            label="班级"
          />
          <el-table-column label="成绩" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.score" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="250px">
            <template slot-scope="scope">
              <el-button
                @click="submitScore(scope.row)"
                type="primary"
                size="medium"
              >
                保存
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="积分管理" name="jifenguanli">
        <el-form ref="searchFormRef" :model="searchForm" inline>
          <el-form-item>
            <el-select v-model="searchForm.sport" placeholder="比赛项目">
              <el-option
                v-for="it in xiangmuShuzu"
                :key="it._id"
                :label="it.name"
                :value="it._id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="searchByXM()">
              查询
            </el-button>
          </el-form-item>
        </el-form>
        <el-table :data="sportItemList">
          <el-table-column align="center" prop="sport.name" label="比赛项目" />
          <el-table-column
            align="center"
            prop="student.stuName"
            label="参赛学生"
          />
          <el-table-column align="center" prop="student.sex" label="性别" />
          <el-table-column
            align="center"
            prop="student.parent.className"
            label="班级"
          />
          <el-table-column
            label="成绩"
            align="center"
            width="120px"
            prop="score"
          >
          </el-table-column>
          <el-table-column label="积分" align="center">
            <template slot-scope="scope">
              <el-select v-model="scope.row.jf" placeholder="选择积分">
                <el-option
                  v-for="item in 9"
                  :key="item"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="submitJf(scope.row)"
                type="primary"
                size="medium"
              >
                保存
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      activeName: "chakanbisai",
      xiangmuShuzu: [],

      searchForm: {
        sport: "",
      },
      sportItemList: [],
    };
  },
  created() {
    this.fetch();
    this.getXiangmu();
  },

  methods: {
    async submitJf(row) {
      console.log(row);
      // 录入学生积分
      row.student.jf = row.jf + row.student.jf;
      const rs = await this.$http.put(
        `rest/students/${row.student._id}`,
        row.student
      );
      if (rs.status !== 200) return;
      this.$message.success("成功录入学生积分");
      console.log("学生积分");
      console.log(rs.data);
      // 录入班级积分
      row.student.parent.jf = row.jf + row.student.parent.jf;
      const rs2 = await this.$http.put(
        `rest/classes/${row.student.parent._id}`,
        row.student.parent
      );
      if (rs2.status !== 200) return;
      this.$message.success("成功录入班级积分");
      console.log("班级积分");
      console.log(rs.data);
      // 录入比赛积分
      const rs1 = await this.$http.put(`rest/applies/${row._id}`, row);
      if (rs1.status !== 200) return;
      this.$message.success("成功录入比赛积分");
      console.log("比赛积分");
      console.log(rs.data);
    },
    async submitScore(row) {
      console.log("row--------------");
      console.log(row);
      const rs = await this.$http.put(`rest/applies/${row._id}`, row);
      if (rs.status !== 200) return;
      this.$message.success("成功录入成绩");
    },
    remove(row) {
      this.$confirm(`是否删除报名`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const rs = await this.$http.delete(`rest/applies/${row._id}`);
        rs;
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        this.fetch();
      });
    },
    async fetch() {
      const rs = await this.$http.get("rest/applies");
      this.sportItemList = rs.data;
      console.log("报名列表");
      console.log(rs.data);
    },

    async getXiangmu() {
      const rs = await this.$http.get("rest/sport_items");
      if (rs.status !== 200) return;
      this.xiangmuShuzu = rs.data;
      console.log("项目");
      console.log(rs.data);
    },

    async fenpeizuci() {
      for (var i = 0; i <= this.sportItemList.length; i++) {
        this.$set(this.sportItemList[i].daoci, this.daociShuzu[i]);
        // this.sportItemList[i].daoci =  this.daociShuzu[i]
      }
      console.log("分配完成-------------------------------");
    },
    async searchByXM() {
      const rs = await this.$http.post("sportManage/search", this.searchForm);
      if (rs.status !== 200) return;
      // this.xiangmuShuzu = rs.data;
      console.log("比赛查询");
      console.log(rs.data);
      this.sportItemList = rs.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.fiw {
  width: 200px;
}
h1 {
  margin-bottom: 40px;
}
.el-row {
  margin-bottom: 25px;
}
.elrowdy {
  display: flex;
  flex-direction: row-reverse;
}
</style>
